<template>
  <div class="checkout">
    <div class="container">
      <h2>订单结算</h2>
      
      <!-- 收货地址选择 -->
      <div class="address-section">
        <h3>收货地址</h3>
        <div class="address-list" v-loading="addressLoading">
          <template v-if="addressList.length">
            <el-radio-group v-model="selectedAddressId">
              <!-- 收货地址选择 -->
              <div v-for="address in addressList" :key="address.id" class="address-item">
                <el-radio :value="address.id">  <!-- 修改 label 为 value -->
                  <div class="address-content">
                    <div class="recipient-info">
                      <span class="name">{{ address.recipientName }}</span>
                      <span class="phone">{{ address.telephone }}</span>
                      <el-tag v-if="address.default" size="small" type="success">默认</el-tag>
                    </div>
                    <div class="address-detail">{{ formatAddress(address) }}</div>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
          </template>
          <div v-else class="empty-address">
            <el-empty description="暂无收货地址"></el-empty>
          </div>
          <div class="address-actions">
            <el-button type="primary" link @click="goToAddressManage">
              管理收货地址
            </el-button>
          </div>
        </div>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-section">
        <h3>支付方式</h3>
        <div class="payment-options">
          <el-radio-group v-model="selectedPayment">
            <div class="payment-item" v-for="payment in paymentMethods" :key="payment.id">
              <el-radio :value="payment.id">  <!-- 修改 label 为 value -->
                <div class="payment-content">
                  <img :src="payment.icon" :alt="payment.name">
                  <span class="payment-name">{{ payment.name }}</span>
                </div>
              </el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>

      <!-- 优惠券选择 -->
      <div class="coupon-section">
        <h3>优惠券</h3>
        <div class="coupon-options" v-loading="couponsLoading">
          <template v-if="availableCoupons.length > 0">
            <div class="debug-info" v-if="false">
              可用优惠券数量: {{ availableCoupons.length }}
              <pre>{{ JSON.stringify(availableCoupons[0], null, 2) }}</pre>
            </div>
            <div class="coupon-item" 
                 v-for="coupon in availableCoupons" 
                 :key="coupon.id"
                 :class="{ 
                   'coupon-disabled': !coupon.available,
                   'coupon-selected': isCouponSelected(coupon.id)
                 }"
                 @click="toggleCoupon(coupon)">
              <div class="coupon-content">
                <div class="coupon-left">
                  <div class="coupon-amount">¥{{ coupon.couponData?.value || 0 }}</div>
                  <div class="coupon-condition" v-if="coupon.couponData?.minAmount > 0">
                    满{{ coupon.couponData?.minAmount || 0 }}元可用
                  </div>
                  <div class="coupon-type">
                    {{ getCouponTypeText(coupon.couponData?.type) }}
                  </div>
                </div>
                <div class="coupon-right">
                  <div class="coupon-name">{{ coupon.couponData?.name || '优惠券' }}</div>
                  <div class="coupon-code">券码: {{ coupon.couponCode || '无' }}</div>
                  <div class="coupon-scope" v-if="coupon.couponData?.shopId">
                    适用店铺: {{ getShopName(coupon.couponData.shopId) }}
                  </div>
                  <div class="coupon-scope" v-else>
                    全场通用
                  </div>
                  <div class="coupon-time">{{ formatCouponTime(coupon) }}</div>
                  <div class="coupon-tags">
                    <el-tag size="small" :type="coupon.couponData?.stackable ? 'success' : 'info'">
                      {{ coupon.couponData?.stackable ? '可叠加' : '不可叠加' }}
                    </el-tag>
                    <el-tag size="small" type="warning" v-if="isCouponSelected(coupon.id)">
                      已选择
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div v-else class="empty-coupon">
            <el-empty description="暂无可用优惠券"></el-empty>
          </div>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="order-info">
        <h3>订单信息</h3>
        <div class="order-items">
          <div v-for="item in checkoutItems" :key="item.id" class="order-item">
            <img :src="item.image" :alt="item.name">
            <div class="item-info">
              <h4>{{ item.name }}</h4>
              <div class="sku-specs" v-if="item.skuSpecs">
                <span v-for="(val, key) in item.skuSpecs" :key="key" class="sku-spec">
                  {{ key }}：{{ val }}
                </span>
              </div>
              <p class="price">¥{{ item.price.toFixed(2) }}</p>
              <p class="quantity">x{{ item.quantity }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 订单总结 -->
      <div class="order-summary">
        <div class="summary-items">
          <div class="summary-item">
            <span class="label">商品金额：</span>
            <span class="value">¥{{ totalAmount.toFixed(2) }}</span>
          </div>
          <template v-if="selectedCouponIds.length > 0">
            <div class="summary-item" v-for="(id, index) in selectedCouponIds" :key="id">
              <span class="label">优惠券{{ selectedCouponIds.length > 1 ? (index + 1) : '' }}：</span>
              <span class="value discount">-¥{{ getCouponValue(id) }}</span>
            </div>
          </template>
          <div class="summary-item total">
            <span class="label">应付金额：</span>
            <span class="value">¥{{ finalAmount.toFixed(2) }}</span>
          </div>
        </div>
        <button class="submit-btn" @click="submitOrder">提交订单</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, h, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getAddressList } from '@/api/address'
import { ElMessage, ElMessageBox } from 'element-plus'
import { transformRegionData } from '@/utils/region'
import regionData from '/public/data/pca-code.json'
import { createOrder } from '@/api/order'
import { getCouponListByUserId } from '@/api/coupon'  // 导入优惠券接口

const router = useRouter()
const route = useRoute()  // 添加 route 实例
const addressLoading = ref(false)
const addressList = ref([])
const selectedAddressId = ref('')
const regionOptions = ref(transformRegionData(regionData))
const orderId = ref('')

// 优惠券相关
const couponsLoading = ref(false)
const availableCoupons = ref([])
const selectedCouponIds = ref([]) // 存储选中的优惠券ID列表，用于支持叠加使用
const selectedCouponId = ref(null) // 兼容旧逻辑，保留单选模式

// 获取地址列表
const fetchAddressList = async () => {
  addressLoading.value = true
  try {
    const res = await getAddressList()
    if (res && Array.isArray(res)) {
      addressList.value = res
      // 如果有默认地址，自动选中
      const defaultAddress = res.find(addr => addr.default)
      if (defaultAddress) {
        selectedAddressId.value = defaultAddress.id
      } else if (res.length > 0) {
        // 没有默认地址则选中第一个
        selectedAddressId.value = res[0].id
      }
    }
  } catch (error) {
    console.error('获取地址列表失败：', error)
  } finally {
    addressLoading.value = false
  }
}

// 格式化地址
const formatAddress = (address) => {
  const regionText = [address.province, address.city, address.district].map(code => {
    const option = regionOptions.value.find(item => item.value === code)
    return option ? option.label : ''  // 如果找不到对应的label，返回空字符串而不是编码
  }).filter(text => text).join(' ')  // 过滤掉空字符串，避免多余的空格
  return `${regionText} ${address.addressDetail}`
}

// 跳转到地址管理页面
const goToAddressManage = () => {
  router.push('/user/address')
}

// 初始化
onMounted(() => {
  fetchAddressList()
})

// 提交订单
const submitOrder = async () => {
  if(selectedPayment.value =='wechat'){
    ElMessage.info('微信支付功能还没实现哦')
    return
  }
  try {
    // 验证是否选择了收货地址
    if (!selectedAddressId.value) {
      ElMessage.warning('请选择收货地址')
      return
    }

    // 获取选中的地址信息
    const selectedAddress = addressList.value.find(addr => addr.id === selectedAddressId.value)
    if (!selectedAddress) {
      ElMessage.error('地址信息获取失败')
      return
    }

    // 构造地址DTO对象
    const addressDTO = {
      province: selectedAddress.province,
      city: selectedAddress.city,
      district: selectedAddress.district,
      addressDetail: selectedAddress.addressDetail,
      telephone: selectedAddress.telephone,
      recipientName: selectedAddress.recipientName,
      postalCode: selectedAddress.postalCode || ''
    }

    // 获取购物车ID列表
    const cartIds = checkoutItems.value.map(item => item.id.toString())
    
    // 获取优惠券编码列表
    const couponCodes = getSelectedCouponCodes();
    
    // 构造请求数据
    const data = {
      address: addressDTO,
      cartIds: cartIds,
      couponId: selectedCouponId.value, // 兼容旧接口
      couponCodes: couponCodes // 新增优惠券编码列表
    }
    
    console.log('提交订单数据:', data);
    
    const res = await createOrder(data)
    if (res) {
      ElMessage.success('订单提交成功')
      router.push({
        path: '/payment',
        query: {
          id: res,
          method: selectedPayment.value
        }
      })
    } else {
      throw new Error('创建订单失败')
    }
  } catch (error) {
    console.error('提交订单失败：', error)
    ElMessage.error(error.message || '订单提交失败，请重试')
  }
}

// 添加商品数据相关的响应式变量
const checkoutItems = ref([])
const totalAmount = ref(0)

// 在 onMounted 中获取商品数据
onMounted(() => {
  // 获取地址列表
  fetchAddressList()
  
  // 获取并解析商品数据
  const itemsQuery = route.query.items
  if (itemsQuery) {
    try {
      checkoutItems.value = JSON.parse(decodeURIComponent(itemsQuery))
      // 计算总金额
      totalAmount.value = checkoutItems.value.reduce((total, item) => {
        return total + (item.price * item.quantity)
      }, 0)
      
      console.log('商品总金额:', totalAmount.value)
      
      // 获取可用优惠券
      fetchAvailableCoupons().then(() => {
        console.log('优惠券加载完成，数量:', availableCoupons.value.length)
      })
    } catch (error) {
      console.error('解析商品数据失败：', error)
      ElMessage.error('商品数据解析失败')
      router.push('/cart')
    }
  } else {
    ElMessage.warning('请先选择商品')
    router.push('/cart')
  }
})

// 按店铺分组的商品
const shopGroupedItems = computed(() => {
  const groups = {};
  checkoutItems.value.forEach(item => {
    const shopId = item.shopId || 'common';
    if (!groups[shopId]) {
      groups[shopId] = [];
    }
    groups[shopId].push(item);
  });
  return groups;
});

// 按店铺计算小计金额
const shopSubtotals = computed(() => {
  const result = {};
  Object.keys(shopGroupedItems.value).forEach(shopId => {
    result[shopId] = shopGroupedItems.value[shopId].reduce(
      (sum, item) => sum + item.price * item.quantity, 
      0
    );
  });
  return result;
});

// 获取可用优惠券列表
const fetchAvailableCoupons = async () => {
  couponsLoading.value = true
  try {
    // 调用真实API获取优惠券列表
    const response = await getCouponListByUserId()
    
    console.log('优惠券API原始返回数据:', response)
    
    // 根据实际API返回结构处理数据
    let couponsData = [];
    
    // 处理不同的返回格式
    if (response && response.data && Array.isArray(response.data)) {
      // 如果返回格式是 { data: [...] }
      couponsData = response.data;
    } else if (response && Array.isArray(response)) {
      // 如果直接返回数组
      couponsData = response;
    } else {
      console.warn('无法识别的优惠券数据格式:', response);
      availableCoupons.value = [];
      return;
    }
    
    // 处理优惠券数据
    const coupons = couponsData.map(coupon => {
      // 根据店铺ID和订单金额判断优惠券是否可用
      let isAvailable = true;
      
      // 判断优惠券适用的店铺
      const couponShopId = coupon.couponData?.shopId;
      
      // 如果优惠券指定了店铺
      if (couponShopId) {
        // 检查是否有该店铺的商品
        if (!shopGroupedItems.value[couponShopId]) {
          isAvailable = false;
        } else if (coupon.couponData?.minAmount > 0) {
          // 检查该店铺的商品总金额是否满足条件
          isAvailable = shopSubtotals.value[couponShopId] >= coupon.couponData.minAmount;
        }
      } else if (coupon.couponData?.minAmount > 0) {
        // 通用优惠券，检查订单总金额是否满足条件
        isAvailable = totalAmount.value >= coupon.couponData.minAmount;
      }
      
      return {
        ...coupon,
        available: isAvailable
      };
    });
    
    console.log('处理后的优惠券数据:', coupons);
    availableCoupons.value = coupons;
    
    // 自动选择最优惠的可用优惠券
    selectBestCoupons();
  } catch (error) {
    console.error('获取优惠券失败：', error);
    ElMessage.error('获取优惠券失败，请刷新重试');
    availableCoupons.value = [];
  } finally {
    couponsLoading.value = false;
  }
}

// 自动选择最优惠的可用优惠券组合
const selectBestCoupons = () => {
  // 重置选择
  selectedCouponIds.value = [];
  
  // 获取可用优惠券
  const availableCouponList = availableCoupons.value.filter(c => c.available);
  if (availableCouponList.length === 0) return;
  
  // 按不可叠加和可叠加分组
  const nonStackable = availableCouponList.filter(c => !c.couponData.stackable)
    .sort((a, b) => (b.couponData?.value || 0) - (a.couponData?.value || 0));
  
  const stackable = availableCouponList.filter(c => c.couponData.stackable)
    .sort((a, b) => (b.couponData?.value || 0) - (a.couponData?.value || 0));
  
  // 策略1: 使用单个最高额的不可叠加券
  const bestNonStackable = nonStackable[0];
  const nonStackableValue = bestNonStackable ? bestNonStackable.couponData.value : 0;
  
  // 策略2: 使用所有可叠加券的总和
  const stackableValue = stackable.reduce((sum, coupon) => sum + (coupon.couponData?.value || 0), 0);
  
  // 选择最优策略
  if (nonStackableValue > stackableValue && bestNonStackable) {
    // 使用单个不可叠加券
    selectedCouponIds.value = [bestNonStackable.id];
    selectedCouponId.value = bestNonStackable.id; // 兼容旧逻辑
  } else if (stackable.length > 0) {
    // 使用所有可叠加券
    selectedCouponIds.value = stackable.map(c => c.id);
    selectedCouponId.value = stackable[0].id; // 兼容旧逻辑，选择第一个
  }
}

// 切换优惠券选择
const toggleCoupon = (coupon) => {
  const couponId = coupon.id;
  
  // 如果优惠券不可用，不做任何操作
  if (!coupon.available) return;
  
  // 如果是不可叠加优惠券
  if (!coupon.couponData.stackable) {
    // 如果已经选中，则取消选择
    if (selectedCouponIds.value.includes(couponId)) {
      selectedCouponIds.value = [];
    } else {
      // 否则，清空之前的选择，只选择这一个
      selectedCouponIds.value = [couponId];
    }
  } else {
    // 如果是可叠加优惠券
    const index = selectedCouponIds.value.indexOf(couponId);
    
    // 检查当前是否有不可叠加券被选中
    const hasNonStackable = selectedCouponIds.value.some(id => {
      const c = availableCoupons.value.find(c => c.id === id);
      return c && !c.couponData.stackable;
    });
    
    if (hasNonStackable) {
      // 如果有不可叠加券，则清空所有选择，选择这个可叠加券
      selectedCouponIds.value = [couponId];
    } else if (index > -1) {
      // 如果已经选中，则取消选择
      selectedCouponIds.value.splice(index, 1);
    } else {
      // 否则，添加到选择列表
      selectedCouponIds.value.push(couponId);
    }
  }
  
  // 更新单选模式的选择（兼容旧逻辑）
  selectedCouponId.value = selectedCouponIds.value.length > 0 ? selectedCouponIds.value[0] : null;
}

// 判断优惠券是否被选中
const isCouponSelected = (couponId) => {
  return selectedCouponIds.value.includes(couponId);
}

// 计算优惠后的总金额
const finalAmount = computed(() => {
  if (selectedCouponIds.value.length === 0) return totalAmount.value;
  
  // 计算总优惠金额
  let discountAmount = 0;
  
  selectedCouponIds.value.forEach(id => {
    const coupon = availableCoupons.value.find(c => c.id === id);
    if (coupon && coupon.available && coupon.couponData) {
      discountAmount += coupon.couponData.value || 0;
    }
  });
  
  // 确保最终金额不小于0.01
  return Math.max(totalAmount.value - discountAmount, 0.01);
});

// 获取优惠金额
const getDiscountAmount = () => {
  if (selectedCouponIds.value.length === 0) return '0.00';
  
  // 计算总优惠金额
  let discountAmount = 0;
  
  selectedCouponIds.value.forEach(id => {
    const coupon = availableCoupons.value.find(c => c.id === id);
    if (coupon && coupon.available && coupon.couponData) {
      discountAmount += coupon.couponData.value || 0;
    }
  });
  
  return discountAmount.toFixed(2);
}

// 获取选中的优惠券编码列表
const getSelectedCouponCodes = () => {
  return selectedCouponIds.value.map(id => {
    const coupon = availableCoupons.value.find(c => c.id === id);
    return coupon ? coupon.couponCode : '';
  }).filter(code => code);
}

// 支付方式数据
const selectedPayment = ref('alipay')
const paymentMethods = [
  {
    id: 'alipay',
    name: '支付宝支付',
    icon: '/images/payment/alipay.png'
  },
  {
    id: 'wechat',
    name: '微信支付',
    icon: '/images/payment/wechat.png'
  }
]

// 获取优惠券类型文本
const getCouponTypeText = (type) => {
  switch (type) {
    case 1:
      return '满减券';
    case 2:
      return '秒杀券';
    default:
      return '优惠券';
  }
}

// 格式化优惠券时间
const formatCouponTime = (coupon) => {
  if (!coupon || !coupon.expireTime) return '永久有效'
  
  try {
    const obtainTime = coupon.obtainTime ? new Date(coupon.obtainTime) : new Date()
    const expireTime = new Date(coupon.expireTime)
    
    return `${obtainTime.toLocaleDateString()} - ${expireTime.toLocaleDateString()}`
  } catch (error) {
    console.error('日期格式化错误:', error)
    return '日期格式错误'
  }
}

// 获取店铺名称
const getShopName = (shopId) => {
  // 这里应该根据shopId获取店铺名称
  // 简单实现，实际项目中可以通过API获取或从商品信息中提取
  const shopMap = {
    101: '数码电器专营店',
    102: '电脑配件专营店',
    103: '服装专营店',
    104: '食品专营店'
  };
  
  return shopMap[shopId] || `店铺${shopId}`;
}

// 获取单个优惠券的金额
const getCouponValue = (couponId) => {
  const coupon = availableCoupons.value.find(c => c.id === couponId);
  if (!coupon || !coupon.couponData) return '0.00';
  return (coupon.couponData.value || 0).toFixed(2);
}
</script>

<style lang="scss" scoped>
.checkout {
  padding: 20px 0;
  background-color: #f5f5f5;
  min-height: calc(100vh - 200px);
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  margin-bottom: 30px;
  color: #ff4d4f;
}

.address-section,
.payment-section,
.order-info {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

.order-items {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.order-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s;
}

.order-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-color: #ff4d4f;
}

.order-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-info h4 {
  font-size: 16px;
  margin: 0 0 10px 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-info .price {
  font-size: 18px;
  color: #ff4d4f;
  margin: 0;
}

.item-info .quantity {
  color: #666;
  margin: 5px 0 0 0;
}

.order-summary {
  margin-top: 30px;
  padding: 20px 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.summary-items {
  margin-bottom: 20px;
}

.summary-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #333;
}

.value {
  color: #333;
}

.discount {
  color: #ff4d4f;
}

.submit-btn {
  font-size: 18px;
  padding: 12px 40px;
  border-radius: 8px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  background-color: #ff7875;
}

.address-list {
  margin-top: 20px;
}

.address-item {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.address-item:hover {
  border-color: #ff4d4f;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.recipient-info {
  margin-bottom: 8px;
}

.name {
  font-weight: bold;
  margin-right: 10px;
  color: #333;
}

.phone {
  color: #666;
}

.address-detail {
  color: #666;
  font-size: 14px;
}

.address-actions {
  margin-top: 20px;
  text-align: right;
}

.empty-address {
  padding: 40px 0;
  text-align: center;
}

.payment-options {
  margin-top: 20px;
}

.payment-item {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s;
}

.payment-item:hover {
  border-color: #ff4d4f;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.payment-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.payment-content img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.payment-name {
  font-size: 16px;
  color: #333;
}

/* 支付弹窗样式 */
:deep(.pay-dialog) {
  .el-message-box__content {
    padding: 20px;
  }
}

.pay-dialog-content {
  text-align: center;
  padding: 20px 0;

  .countdown-bar {
    margin-bottom: 20px;
  }

  .order-amount {
    font-size: 20px;
    margin-bottom: 30px;

    .amount {
      color: #ff4d4f;
      font-size: 28px;
      font-weight: bold;
      margin-left: 10px;
    }
  }

  .payment-qrcode {
    img {
      width: 200px;
      height: 200px;
      margin-bottom: 15px;
    }

    p {
      color: #666;
      font-size: 16px;
    }
  }
}

.coupon-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.coupon-options {
  margin-top: 20px;
}

.coupon-item {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.coupon-item:hover:not(.coupon-disabled) {
  border-color: #ff4d4f;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.coupon-selected {
  border-color: #ff4d4f !important;
  background-color: #fff1f0;
}

.coupon-selected:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #ff4d4f transparent transparent;
}

.coupon-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.coupon-disabled:hover {
  transform: none;
  border-color: #e8e8e8;
  box-shadow: none;
}

.coupon-scope {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.coupon-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.coupon-left {
  flex: 1;
}

.coupon-amount {
  font-size: 18px;
  color: #ff4d4f;
  margin-bottom: 5px;
}

.coupon-condition {
  color: #666;
  font-size: 14px;
}

.coupon-right {
  flex: 1;
}

.coupon-name {
  font-size: 16px;
  color: #333;
}

.coupon-code {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.coupon-time {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.coupon-tags {
  margin-top: 5px;
}

.empty-coupon {
  padding: 40px 0;
  text-align: center;
}

.summary-item.total {
  font-size: 18px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.summary-item.total .value {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
}

.coupon-type {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
}
</style>
